<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

    <el-radio-group v-model="size">
      <el-radio label="">默认</el-radio>
      <el-radio label="medium">中等</el-radio>
      <el-radio label="small">小型</el-radio>
      <el-radio label="mini">超小</el-radio>
    </el-radio-group>

    <el-descriptions
      class="margin-top"
      title="带边框列表"
      :column="3"
      :size="size"
      border
    >
      <template slot="extra">
        <el-button type="primary" size="small" @click="gogogogo()"
          >发消息</el-button
        >
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        kooriookami
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        18100000000
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          居住地
        </template>
        苏州市
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          备注
        </template>
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          联系地址
        </template>
        江苏省苏州市吴中区吴中大道 1188 号
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      class="margin-top"
      title="无边框列表"
      :column="3"
      :size="size"
    >
      <template slot="extra">
        <el-button type="primary" size="small" @click="totototo()"
          >跳转</el-button
        >
      </template>
      <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址"
        >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
      >
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    totototo() {
      this.$router.push({ path: '/about' })
      // history.pushState(null, '/about', '/about')
    },
    gogogogo() {
      window?.qiankunProps?.setGlobalState({
        message: '子应用发送给主应用的消息',
      })
      // history.pushState(null, '/about', '/about')
    },
  },
  mounted() {
    window?.qiankunProps?.onGlobalStateChange((state, prev) => {
      console.log('子应用接收到主应用的消息', state, prev)
    })
  },
  // onUnmounted() {
  //   window?.qiankunProps?.offGlobalStateChange() 移除当前应用的状态监听，微应用 umount 时会默认调用
  // },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      size: '',
    }
  },
  props: {
    msg: String,
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
